<template>
    <div class="page maintenceKanban-page" data-page="maintenceKanban">
        <div class="link-tab-page-top">
            <div class="link-tab-page-title">看板</div>
            <a href="#" class="link bind-change-unit" @click="selectOrg()">
                <i class="iconfont icon-APPicon_shaixuan1
 search-select"></i>
            </a>
        </div>
        <div class="maintence-top-unit"></div>
        <div class="page-content pdbottom100 ptr-content maintenceKanban-content" @ptr:refresh="refreshCards" style="padding-bottom: 150px;">
            <div class="ptr-preloader" id="refresh_maintence" style="z-index: 9999;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <!-- 维保方看板 -->
            <div class="maintence-cards-content"></div>
            <div class="bottom-custom-cards">
                <div class="set-custom-cards-btn bind-set-card">
                    <span class="iconfont icon-bianji1" style="font-size: 14px;margin-right: 2px;"></span>定制我的看板
                </div>
            </div>
        </div>
    </div>
</template> 

<script>
    return {
        mounted() {
            var self = this;
        },
        data: function () {
            return {
            	selectOptionOrg : "",
                maintenceOrg:'',
                resourse:[],
            }
        },
        methods: {
            getCards:function(){
            	let self = this;
                let $ = self.$$;
                Dao.unitStateList({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    userAccount: userInfor.accountName,
                    isMuilUnitUser: userInfor.isMuilUnitUser,
                    status: 1,
                    orgCode: platformCode || app.data.defaultPlatCode,
                    orgId:""
                }, function (data) {
                    self.resourse = data;
                    self.setCardDom(data);
                });
            },
            //设置卡片Dom
            setCardDom: function () {
                let self = this;
                let $ = self.$$;
                jQuery(".maintence-cards-content").empty();
                if (self.resourse && self.resourse.length > 0) {
                    for (let i = 0; i < self.resourse.length; i++) {
                        $(".maintence-cards-content").append(`
                            <div class="view  card-view-style card-view-`+ self.resourse[i].id +`" 
                                id="`+ self.resourse[i].link +`" 
                                data-name="`+ self.resourse[i].link +`">
                            </div>
                        `);
                    }
                    self.showEveryCards();
                }else{
                    $(".maintence-cards-content").append(`<div class="no-data-img"><img src='`+listNoDataPic()+`'/></div>`);
                }
            },
            //卡片嵌入页面
            showEveryCards: function () {
                let self = this;
                let $ = self.$$;
                if (self.resourse && self.resourse.length > 0) {
                    for (let i = 0; i < self.resourse.length; i++) {
                        app.views.create('#' + self.resourse[i].link, {url: '/' + self.resourse[i].link + '/'});
                    }
                }
            },
            //刷新
            refreshCards: function (e, done) {
                let self = this;
                let $ = self.$$;
                if(1 === e){
                    common.loading(1);
                }else{
                    $("#refresh_maintence").show();
                }
                if (done && e) {
                    setTimeout(function () {
                        self.getCards();
                        done();
                        if(1 === e){
                            common.loading(0);
                        }else{
                            $("#refresh_maintence").hide();
                        }
                    },1000);
                }
            },
            //绑定事件
            initBind:function(){
                let self = this;
                jQuery(".maintence-top-unit span").off().click(function(e){
                    var $current = jQuery(e.currentTarget)
                    common.loading(1);
                    single_Orgid_wbdw =$current.attr("data-orgId");
                    single_OrgName_wbdw = $current.attr("data-orgName");
                    //jQuery(".maintence-top-unit span").removeClass('on');
                    $current.siblings('span').removeClass('on')
                    $current.addClass('on');
                    self.getCards();
                });
                
                //定制
                jQuery(".bind-set-card").click(function(event) {
                    app.router.navigate("/editCard/");
                });
            },
            selectOrg:function(){
            	let self = this;
            	loadSelectUnitFunc(function(data){
            		common.loading(1);
                    single_Orgid_wbdw=data.orgId;
                    single_OrgName_wbdw = data.orgName
                    setTimeout(() => {
                        jQuery(".maintence-top-unit span").removeClass('on');
                        //筛选滚动到选择的单位
                        let $span = jQuery(".maintence-top-unit span[data-orgId=" + single_Orgid_wbdw + "]")
                        $span.addClass('on');
                        $span[0].scrollIntoView({ behavior: "auto", block: "end", inline: "center" });
                    }, 200);
                    self.getCards();
                },self.selectOptionOrg);
            }
        },
        on: {
            pageInit: function (e, page) {
                let self = this;

                if(app.data.isFirstLoad){
                    app.data.isFirstLoad=false;
                    getPublicReouse();
                }

                //刚进入页面
                if(page.route.name == "maintenceKanban"){
                    $(".maintence-top-unit").empty();
                    if(currentUserUnitListData.length > 0){
                        single_Orgid_wbdw = currentUserUnitListData[0].organizationId;
                        single_OrgName_wbdw = currentUserUnitListData[0].shortName;
                        for(let i=0;i<currentUserUnitListData.length;i++){
                            if(i == 0){
                                $(".maintence-top-unit").append(`<span id="`+currentUserUnitListData[i].organizationId+`" class="on" data-orgId="`+currentUserUnitListData[i].organizationId+`" data-orgName="`+currentUserUnitListData[i].shortName+`">`+currentUserUnitListData[i].shortName+`</span>`);
                            }else{
                                $(".maintence-top-unit").append(`<span id="`+currentUserUnitListData[i].organizationId+`" data-orgId="`+currentUserUnitListData[i].organizationId+`" data-orgName="`+currentUserUnitListData[i].shortName+`">`+currentUserUnitListData[i].shortName+`</span>`);
                            }
                        }
                    }
                    self.getCards();
                }

                //最后一个page进入的时候
                if(self.resourse.length > 0){
                    if(self.resourse[self.resourse.length-1].link == page.route.name){
                        self.initBind();
                    }
                }
                if(self.resourse.length == 0){
                    self.initBind();
                }
                window.getCards_maintenceKanban = self.refreshCards;

                setTimeout(function(){
                    common.loading(0);
                },1000);
            },
        }
    }
</script>
<style>
    .link-tab-page-title{
        font-weight: bold;
    }
</style>